<template>
	<el-row class="tac" style="height:100%">
		<el-col :span="24">
			<div class="mb-2" style="display: flex; align-items: center;height: 60px;">
				<img src="@/assets/logo.png" alt="Logo" style="height: 45px; margin-right: 10px;">
				<span style="font-size: 20px; font-weight: bold;">锦田云</span>
			</div>

			<el-menu :default-active="$route.path" class="el-menu-vertical-demo" router @open="handleOpen"
				@close="handleClose" style="height: 100%">
				<el-menu-item index="/purches/0">
					<el-icon>
						<CirclePlus />
					</el-icon>
					<span>购买/续费</span>
				</el-menu-item>

				<el-menu-item index="/my_phone">
					<el-icon>
						<Iphone />
					</el-icon>
					<span>我的云手机</span>
				</el-menu-item>

				<!--      <el-sub-menu index="/orders">-->
				<!--        <template #title>-->
				<!--          <el-icon><Document /></el-icon>-->
				<!--          <span>订单管理</span>-->
				<!--        </template>-->
				<!--        <el-menu-item index="/orders/list">订单列表</el-menu-item>-->
				<!--        <el-menu-item index="/orders/statistics">订单统计</el-menu-item>-->
				<!--      </el-sub-menu>-->

				<el-menu-item index="/wallet">
					<el-icon>
						<Wallet />
					</el-icon>
					<span>钱包</span>
				</el-menu-item>
				<!--      <el-menu-item index="/settings">-->
				<!--        <el-icon><setting /></el-icon>-->
				<!--        <span>系统设置</span>-->
				<!--      </el-menu-item>-->
			</el-menu>
		</el-col>
	</el-row>
</template>

<script setup>
	import {
		CirclePlus,
		// Setting,
		Iphone,
		Wallet
	} from '@element-plus/icons-vue'
	//import { useRoute } from 'vue-router'  // 引入useRoute获取当前路由

	const handleOpen = (key, keyPath) => {
		console.log(key, keyPath)
	}
	const handleClose = (key, keyPath) => {
		console.log(key, keyPath)
	}
</script>

<script>
	export default {
		name: 'SidebarMenu',
	}
</script>

<style>
	/* 保持原有样式不变 */
	.el-menu-vertical-demo {
		width: 220px;
		height: 100vh;
		border-right: none;
	}

	.el-menu-vertical-demo .el-menu-item,
	.el-menu-vertical-demo .el-sub-menu__title {
		height: 48px;
		line-height: 48px;
	}

	/*.el-menu-vertical-demo .el-menu-item:hover,*/
	/*.el-menu-vertical-demo .el-sub-menu__title:hover {*/
	/*  !*background-color: #1890ff !important;*!*/
	/*  color: white !important;*/
	/*}*/

	.el-menu-vertical-demo .el-menu-item.is-active {
		background-color: #ddeefe !important;
		/*color: white !important;*/
	}

	.el-menu-vertical-demo .el-icon {
		font-size: 18px;
		margin-right: 8px;
	}
</style>